<template>
  <view class="content">
    <view class="lesson-info">
      <h2>{{lessonName}}</h2>
      <view class="preview-contain">
        <view class="word-preview">
          <text class="total-title">词汇总计</text>
          <text class="total-number"><text>{{learned}}</text>/<text>{{count}}</text></text>
        </view>
      </view>
      <view class="description">{{description}}</view>
      <view class="go-on">
        <view @click="goOn" class="go-on-button">开始学习</view>
      </view>
    </view>   
    <view class="word-list">
      <h4>单词列表</h4>
      <WordItem v-for="(word) in wordList" 
      :key="word.id" 
      :word="word" 
      :learned="learnedIds.includes(word.id.toString())" 
      className="item pd20" 
      @click="wordItemClick(word)"/>
    </view>
    <view class="more black">{{ hasMore ? '加载更多' : '已经到底了' }}</view>
  </view>
</template>

<script>
import WordItem from '@/components/lessonDetail/WordItem'
import util from '../../util/util'
export default {
  components : {
    WordItem,
  },
  data(){
    return {
      wordList:[
      ],
      id:0,
      description : 'this is a lesson which could make you to advance coder',
      lessonName:'lesson one',
      learned:0,
      learnedIds: [],
      count:4432,
      // goText:'继续学习',
      page:1,
      // focusCourses:[],
      next:'',
      hasMore: true,
      loading: false
    }
  },
  onLoad(opt){
    this.lessonName = opt.name
    this.description = opt.dis
    this.id = opt.id
    // 获取课程下的单词
    this.getLessonInfo()
    // this.getFocusCourse()
    this.getCourseMatrix()
  },
  methods:{
    // async getFocusCourse(){
    //   const {data} = await util.request({
    //     url : '/api/user_focus_courses'
    //   })
    //   // console.log(data)
    //   this.focusCourses = data.data
    // },
    wordItemClick(info){
      // uni.navigateTo({
      //   url : '/pages/wordDetail/index?'+`id=${info.id}&en=${info.en}`,

      // })
    },

    // 获取已经学习过的单词
    async getCourseMatrix() {
      const res = await util.request({
        url: '/api/user_course_matrix/',
        data: {
          course_id: this.id
        }
      })

      const {data} = res.data
      const len = Object.keys(data).filter(key => {
        let finish = false
        if(data[key] >= 2) {
          finish = true
          this.learnedIds = [...this.learnedIds, key]
        }
        return finish
      }).length

      this.learned = len
    },

    async getLessonInfo(){
      const res = await util.request({
        url : '/api/words_by_course/',
        data : {
          page_size:10,
          page:this.page,
          course_id:this.id
        }
      })

      const {data,count,next} = res.data
      this.count = count
      this.wordList = data
      this.next = next
      const course_data = {
        course_id : this.id,
        wordList:this.wordList,
        next
      }
      util.setStorage('course_data',course_data)
    },
    async goOn(){
      // const hasFocus = !!this.focusCourses.find(e=>e.id == this.id)
      // if(hasFocus){
      //   // 还没有继续学习的api
      // }else {
      //   await util.request({
      //     url : `/api/user_focus_course/${this.id}`
      //   })
      // }

      uni.navigateTo({
        url : '/pages/wordDetail/index?'+`course_id=${this.id}`,
      })
    },
    async loadMore(){
      if(!this.next){
        return null
      }
      if(this.loading) return
      this.loading = true

      const {data} = await util.request({
        url : '/api/words_by_course/',
        data : {
          page_size:10,
          page:++this.page,
          course_id:this.id
        }
      })
      const {next} = data

      if(next == null) {
        this.hasMore = false
      }

      this.wordList.push(...data.data)
      this.next = next
      this.loading = false

      const course_data = {
        course_id : this.id,
        wordList:this.wordList,
        next
      }
      util.setStorage('course_data',course_data)
    }
  },
  // computed:{
  //   hasFocus(){
  //     return !!this.focusCourses.find(e=>e.id == this.id)
  //   }
  // }

  onReachBottom() {
    this.loadMore()
  }
}
</script>

<style>
.content {
  padding: 20rpx;
  background-color: #fff;
}
.content h2 {
  font-weight: 700;
  text-align: center;
  padding: 20rpx;
  font-size: 40rpx;
}
.content h4 {
  text-align: center;
  padding: 40rpx;
}
.preview-contain {
  display: flex;
  justify-content: center;
  align-items: center;
}
.word-preview {
  width: 300rpx;
  height: 300rpx;
  border: 2px solid #eee;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.total-number text{
  padding: 20rpx;
}
.total-number text:first-child{
  color: #5dcdd3;
}
.word-list {
  margin-bottom: 20rpx;
  border-radius: 4rpx;
  box-shadow: 0 0 1rpx 1rpx #eee;
  padding: 0 20rpx;
}
.word-list .item {
  border-top: 1px solid #eee;
  
}
.go-on-button {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-weight: 700;
  font-size: 32rpx;
  box-shadow: 0 0 1rpx 1rpx #eee;
  border-radius: 4rpx;
  color: #fff;
}
.lesson-info {
  padding: 20rpx 0;
  border-radius: 4rpx;
  box-shadow: 0 0 1rpx 1rpx #eee;
  margin-bottom: 20rpx;
}
.description {
  padding: 20rpx;
}
.go-on {
  display: flex;
  justify-content: center;
}
.go-on-button {
  background-color: #5ccdd3;
  border-radius: 40rpx;
  width: 80%;
  
}

.more{
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #999;
}

</style>